<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>视频详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        [v-cloak]{
            display: none !important;
        }
        .detil{
            width: 90%;
            margin: 0 auto;
        }
        .detil img{
            width: 100%;
        }
    </style>
</head>
<body style="background: #ffffff">

<div id="vue" v-cloak>
    <header class="mui-bar mui-bar-nav top-color">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
        <h1 class="mui-title" style="color: white;">
            创意视频
        </h1>
    </header>

    <div class="mui-card" style="margin-top: 60px;">

        <div class="mui-card-header mui-card-media" style="height:80vw;padding-bottom: 60px;">
            <p style="color: #333;">{{video.videoTitle}}</p>
            <video :src="video.videoUrl" :poster="video.imageUrl" controls="controls" style="width: 100%;height: 100%;">
                your browser does not support the video tag
            </video>
        </div>
        <div class="mui-card-content" style="text-align: right">
            <div class="mui-card-content-inner">
                <!--<p>Posted on : {{time}}</p>-->
                <p>购买价格: <span style="color: red;">￥{{video.price}}</span></p>
            </div>
        </div>
        <!--<div class="mui-card-footer">-->
        <!--&lt;!&ndash;<a class="mui-card-link">Like</a>&ndash;&gt;-->
        <!--&lt;!&ndash;<a class="mui-card-link">Read more</a>&ndash;&gt;-->
        <!--</div>-->
    </div>
    <div class="mui-card" style="margin:30px 0;">
        <p style="text-align: center">详情介绍</p>
        <div class="mui-content" style="background: white;" >
            <div class="detil" v-html="video.videoDetails">
                {{video.videoDetails}}
            </div>

        </div>
    </div>

    <!--<nav class="mui-bar mui-bar-tab" style="height: 40px;">-->
        <!--<div class="mui-input-row mui-password" style="border: 0px;">-->
            <!--<button type="button" id="place"  class="mui-btn mui-btn-primary" style="width: 30%;top: 0px;line-height:1;-->
            <!--border: 0;background-color:rgb(56,206,204);">加入购物车</button>-->
            <!--<button type="button" style="width: 70%;top: 0px;line-height:1;border: 0;background-color: rgb(247, 70, 33);"-->
                    <!--class="mui-btn mui-btn-primary" id="review">立即购买</button>-->
        <!--</div>-->
    <!--</nav>-->

    <!--<div style="padding: 20px;margin-bottom:30px;">-->
        <!--<div class="title" style="padding-bottom: 10px;">-->
            <!--评论-->
        <!--</div>-->
        <!--<ul class="mui-table-view">-->
            <!--<div id="zanwu" style="display: none;margin: 40px 30px;">暂无评论....</div>-->
            <!--<li class="mui-table-view-cell" v-for="item in reviewList" :key="item.id">-->
                <!--<img src="${base!}/assets/front/h5/img/man.png" width="20px;">-->
                <!--{{item.reviewOpName}}:-->
                <!--<p style="padding:10px;">-->
                    <!--{{item.content}}-->
                    <!--<span style="margin-left: 10px;color: #2700ef;" v-on:click="clickReply(item.id,item.reviewOpName,item.reviewOpId)">回复</span>-->
                <!--</p>-->
                <!--<div v-for="item2 in item.replyVOList" :key="item2.id" style="padding-left:10px;">-->
                    <!--<p style="color: #0a0a0a;">{{item2.reviewOpName}}-回复-{{item2.reviewFatherName}}:</p>-->
                    <!--<p style="padding:10px;">-->
                        <!--{{item2.content}}-->
                        <!--<span style="margin-left: 10px;color: #2700ef;" v-on:click="clickReply2(item.id,item2.reviewOpName,item2.reviewOpId,item2.id)">回复</span>-->
                    <!--</p>-->
                <!--</div>-->
            <!--</li>-->
        <!--</ul>-->
    <!--</div>-->
    <div class="mui-card"  v-for="good in feedList" :key="good.id">
        <div class="mui-card-content">
            <div class="mui-card-content">
                <ul class="mui-table-view">
                    <div style="margin: 0 10px;border-bottom: 1px solid #e5e5e5;padding-bottom: 10px">
                        <div>{{good.accountUser.mobile}}<span style="float: right">{{good.feedAt}}</span></div>
                        <p>{{good.feedNote}}</p>
                    </div>
                </ul>
            </div>
        </div>
    </div>

</div>
<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="application/javascript">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    var vue = new Vue({
        el: '#vue',
        data: {
            video: '',
            time:'',
            cms: '',
            cmsTitle:'',
            reviewList:'',
            content:'',    //评论内容
            rcontent:'',   //回复内容
            reviewId:'',  //回复父级编号
            reviewFatherName:'',//回复父级发布人名称
            reviewFatherId:'', //回复父级发布人编号
            reviewReplyId:'', //回复父级回复编号（区分回复的是评论底下哪条回复）
            isHf:1, //是评论还是回复
            feedList: [],

        },
        created:function () {   //实例初始化创建完成执行

            this.getVideoDesc();     //调用自身方法
            this.jqueryLin();
            this.queryFeedback();

        },
        methods:{              //定义封装方法
            //获取列表
            getVideoDesc:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/getVideoDesc.html",
                    dataType:"JSON",
                    data:{
                        id:'${id!}',
                    },
                    success:function(data){
                        if (data.code == 0) {
                            self.video=data.data;
                            var time = timestamp(data.data.opAt)
                            self.time = time;
                            self.getReview();
                        } else {

                        }
                    }
                });

            },
            //获取列表
            queryFeedback:function () {
                var self = this;
                var status = "${status!}";
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/feedback/queryFeedback",
                    dataType:"JSON",
                    data:{
                        goodsId:'${id!}'
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            $.each(d, function (index, obj) {
                                obj.feedAt=timestamp(obj.feedAt)
                                d[index] = obj;
                            })
                            self.feedList = d;
                        } else {

                        }
                    }
                });

            },
            //获取评论回复列表
            getReview:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/getReview.html",
                    dataType:"JSON",
                    data:{
                        cmsId:'${id!}',
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.reviewList = d;
                        } else {

                        }
                    }
                });

            },
            //发布评论
            review:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/review.html",
                    dataType:"JSON",
                    data:{
                        cmsId:'${id!}',
                        cmsTitle:self.cmsTitle,
                        content:self.content
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.content='';
                            self.getReview();
                        }else if(data.code==2){
                            alert("您没有登录，请登录！");
                            window.location.href="${base!}/open/H5/login/login.html"
                        }
                    }
                });

            },
            //点击回复
            clickReply:function(reviewId,reviewFatherName,reviewFatherId){
                this.reviewId = reviewId; //回复父级编号
                this.reviewFatherName = reviewFatherName;//回复父级发布人名称
                this.reviewFatherId = reviewFatherId; //回复父级发布人编号
                this.textBian();
            },
            //点击回复下回复
            clickReply2:function(reviewId,reviewFatherName,reviewFatherId,reviewReplyId){
                this.reviewId = reviewId; //回复父级编号
                this.reviewFatherName = reviewFatherName;//回复父级发布人名称
                this.reviewFatherId = reviewFatherId; //回复父级发布人编号
                this.reviewReplyId= reviewReplyId; //回复父级回复编号（区分回复的是评论底下哪条回复）
                this.textBian();
            },
            //变换样式
            textBian:function(){
                $("#place").attr("placeholder",'请输入回复内容');
                $("#review").html("回复");
                $("#place").focus();
                this.isHf=2;
            },
            //回复评论
            reply:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/cms/reply.html",
                    dataType:"JSON",
                    data:{
                        cmsId:'${id!}',
                        cmsTitle:self.cmsTitle,
                        content:self.content,
                        reviewId : self.reviewId, //回复父级编号
                        reviewFatherName:self.reviewFatherName,//回复父级发布人名称
                        reviewFatherId:self.reviewFatherId, //回复父级发布人编号
                        reviewReplyId:self.reviewReplyId //回复父级回复编号（区分回复的是评论底下哪条回复）
                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.content='';
                            self.getReview();
                        } else if(data.code==2){
                            alert("您没有登录，请登录！");
                            window.location.href="${base!}/open/H5/login/login.html"
                        }
                    }
                });

            },
            //判断调用评论还是回复
            isPlHf:function(){
                if(this.isHf==1){ //评论
                    this.review();
                }else{ //回复
                    this.reply();
                }
            },
            //初始化jquery监听
            jqueryLin:function () {
                _this = this;
            }

        },
        watch:{     //监听器
            reviewList:function () {
                // console.log(this.reviewList)
                if(this.reviewList.length<1){
                    console.log("暂无评论...")
                    $("#zanwu").css("display","block");
                }else {
                    $("#zanwu").css("display","none");
                }

            }
        }

    })

    $("#place").blur(function () {
        if(_this.content.length<1){
            $("#place").attr("placeholder",'请输入评论内容');
            $("#review").html("评论");
            _this.isHf=1;
        }
    })



    //处理时间戳
    function timestamp(timestamp) {
        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes();
        s = date.getSeconds();
        return Y+M+D+h+m;
    }
</script>
</body>
</html>
